<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>wave</title>
    <style>
        body {  }
        body canvas{
            position: absolute;
            bottom: 0;
        }
        .bgTop {
            z-index: 15;
            opacity: 0.9;
        }
        .bgMiddle {
            z-index: 10;
            opacity: 0.75;
        }
        .bgBottom {
            z-index: 5;
        }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
        #canvas2 {
            border: 1px solid #aaaaaa; display: block; margin: 50px auto;
        }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" class="bgTop">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
    <canvas id="canvas2" class="bgMiddle"></canvas>
    <canvas id="canvas2" class="bgBottom"></canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 1200;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,1200,600);

        var canvas2 = document.getElementById("canvas2");
        canvas2.width = 1200;
        canvas2.height = 600;
        var context2 = canvas.getContext("2d");
        context2.fillStyle = "#FFF";
        context2.fillRect(0,0,1200,600);

        drawPrairie(context, 250, 300, 350, 650, "#ea302e", "#e85452", "#ca3735");
        drawPrairie(context2, 250, 280, 350, 630, "#ea302e", "#e85452", "#ca3735");
        // drawPrairie(context2, 350, 200, 300, 550, "#ee302e", "#e45452", "#aa3735");
        // drawPrairie(context, 240, 310, 340 , 410);
        // drawPrairie(context, 270, 320, 350 , 390);
        // drawSky(context);
        // for(var i=0; i <5; i++){
        //     var x0 = 500 * Math.random() + 50;
        //     var y0 = 200 * Math.random() + 50;
        //     var c0 = 100 * Math.random() + 50;
        //     drawCloud(context, x0, y0, c0);
        // }

    };

    function drawPrairie(cxt, x1, y1, x1, y2, c1, c2, c3){
        cxt.save();

        cxt.beginPath();
        cxt.moveTo(0, 420);
        cxt.bezierCurveTo(x1, y1, x1, y2, 1200, 400);
        // cxt.bezierCurveTo(250, 300, 350, 650, 1200, 400);
        // cxt.bezierCurveTo( 250, 300, 350 , 400, 1200, 600);
        cxt.lineTo(1800,600);
        cxt.lineTo(0,600);
        cxt.closePath();

        var lineStyle = cxt.createLinearGradient(0, 600, 600, 0);
        lineStyle .addColorStop(0, c1);
        lineStyle .addColorStop(0.3, c2);
        lineStyle .addColorStop(1, c3);

        cxt.fillStyle = lineStyle;
        cxt.fill();

        cxt.restore();
    }




</script>
</body>
</html>
